<template>
	<view class="main-class">
		<!-- <tn-sticky> -->
			<view class="header-class tn-flex justify-end" >
				<view class="status_bar" style="height: var(--status-bar-height); width: 100%; "></view>			
				<tn-navbar height="45px" home-icon="" :bottom-shadow = "false" bg-color="tn-type-primary_bg" text-color="tn-white" right-operation-width="340" :before-back="beforeBack">任务列表 
				
				</tn-navbar>
			</view>
			<view class="tn-p tn-white_bg">
				<view class="tn-pt-xs">
					客户名称：{{orderInfoData.twobusinessname}}
					<!-- <tn-button type="primary" size="sm" @click="makePhoneCall" class="tn-ml-sm">拨打电话</tn-button> -->
				</view>	
				<view class="tn-pt-xs">
					地址：{{orderInfoData.address}}
					<!-- <tn-button type="primary" size="sm" @click="openNavigation" class="tn-ml-sm">导航</tn-button>
					<tn-button type="primary" size="sm" @click="getLocation" class="tn-ml-sm">采集地址</tn-button> -->
				</view>	
				<view class="tn-pt-xs">
					区域：{{orderInfoData.areaname}}
					<!-- <tn-button type="primary" size="sm" @click="openReceiptDialog" class="tn-ml-sm">拍照</tn-button>
					<tn-button type="primary" size="sm" @click="openSignatureDialog" class="tn-ml-sm">签名</tn-button> -->
				</view>	
				<view class="tn-pt-xs">
					总金额：{{orderInfoData.taxamount}}
				</view>	
				<view class="tn-pt-xs">
					账期：{{orderInfoData.billing}}
				</view>	
				<view class="tn-pt-xs">
					备注：{{orderInfoData.remark}}
				</view>	
				<br/>
				<view class="tn-flex justify-between">
					<view class=" tn-pr-sm tn-pb-sm tn-text-lg">总单金额：<span class="tn-red-dark_text">￥:{{orderInfoData.taxamount}}</span> </view>
					<view class=" tn-pr-sm tn-pb-sm tn-text-lg">选中金额：<span class="tn-red-dark_text">￥:{{selSumAmount}}</span> </view>
				</view>
			
				<view class="tn-flex justify-between items-center">
					<tn-radio-group v-model="payTypeValue" border>
						<tn-radio label="现金">现金</tn-radio>
						<tn-radio label="线上支付">线上支付</tn-radio>
						<tn-radio label="挂账">挂账</tn-radio>
					</tn-radio-group>
					
				</view>
				<view class="tn-pt" v-show="payTypeValue=='现金'">
					<tn-form-item label="实收金额:">
					      <tn-input v-model="selSumAmount" size="sm" />
					</tn-form-item>
				</view>
				<tn-title title="现金调整原因" mode="vLine"  v-show="ssTaxAmount!=selSumAmount && payTypeValue=='现金'" />
				<view class="tn-flex justify-between" v-show="ssTaxAmount!=selSumAmount && payTypeValue=='现金'">
					<tn-radio-group v-model="payTypeCashAdjReason" border>
						<view class="" v-for="(item, index) in payTypeCashAdjReasonList" :key="item.title">
							<tn-radio :label="item.title">{{item.title}}</tn-radio>
						</view>
					</tn-radio-group>
				</view>
				
			</view>

			
		<!-- </tn-sticky> -->
		<hr/>
		<view class="tn-pl tn-pr tn-radius tn-pb scroll-view-class">
			<view class="tn-shadow-md tn-pl-sm tn-pt-sm tn-pb-sm"  v-for="(item, index) in orderInfoData.details">
				<view class="tn-flex tn-flex-center-start">
					<view class="tn-w-1-6">
						<tn-switch v-model="item.sel" size="sm" :active-value="1" :inactive-value="0" class="tn-ml-sm" @click="compTMS(item)" /> 
					</view>
					<view class="tn-w-5-6 tn-flex-column" :style="{'color':item.color}">
						<view class="tn-pt-xs">
							日期：{{item.dates}}
						</view>
						
						<view class="tn-text-xl tn-text-ellipsis-2 tn-pr-xs tn-pt-xs">
							单据编号：{{item.billcode}}
						</view>
						
						<view class="tn-pt-xs">
							金额：{{item.taxamount}}
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="bottom-buttons">
			<view class="">
				<tn-button type="success" size="xl" @click="selAll" >全选</tn-button>
			</view>
			<view class="">
				<tn-button type="danger" size="xl" @click="toNavigate">提交</tn-button>
			</view>
		</view>
		
		<tn-popup v-model="showPopup">
		    <view class="tn-p-lg popup-class"> 
				
				<cc-defineStep :colors="colors" :stepData="stepData"></cc-defineStep>
			</view>
		</tn-popup>
		<tn-popup v-model="showPopup" close-btn @close="clickPopup">
			<view class="tn-p-lg"> 
				<view class="tn-text-2xl tn-text-center tn-text-bold tn-pb-sm">
					<span>金额:{{selSumAmount}}</span>
				</view>
				<uqrcode ref="uqrcode" canvas-id="qrcode" :value="QrCode" ></uqrcode>
			</view>
		</tn-popup>
		
		<!-- 回执上传弹窗 -->
		<tn-popup v-model="showReceiptDialog" mode="center" width="80%" height="auto">
			<view class="receipt-dialog">
				<view class="dialog-header">
					<text class="dialog-title">拍照上传</text>
					<tn-icon name="close" size="40" @click="showReceiptDialog = false"></tn-icon>
				</view>
				<view class="dialog-content">
					<tn-image-upload
						v-model="receiptImages"
						:max-count="9"
						:width="200"
						:height="200"
						@success="handleUploadSuccess"
						@fail="handleUploadFail"
					></tn-image-upload>
				</view>
				<view class="dialog-footer">
					<tn-button type="default" @click="showReceiptDialog = false">取消</tn-button>
					<tn-button type="primary" @click="handleSubmitReceipt">确认</tn-button>
				</view>
			</view>
		</tn-popup>
		
		<!-- 签名弹窗 -->
		<tn-popup v-model="showSignatureDialog" mode="center" width="90%" height="auto">
			<view class="signature-dialog" @touchmove.prevent>
				<view class="dialog-header">
					<text class="dialog-title">签名</text>
					<tn-icon name="close" size="40" @click="showSignatureDialog = false"></tn-icon>
				</view>
				<view class="signature-content" @touchmove.prevent>
					<canvas 
						type="2d"
						canvas-id="signatureCanvas"
						id="signatureCanvas"
						class="signature-canvas"
						@touchstart="touchStart"
						@touchmove="touchMove"
						@touchend="touchEnd"
					></canvas>
				</view>
				<view class="dialog-footer">
					<tn-button type="default" @click="showSignatureDialog = false">取消</tn-button>
					<tn-button type="primary" @click="saveSignature">保存</tn-button>
					<tn-button type="danger" @click="clearSignature">重新签名</tn-button>
				</view>
			</view>
		</tn-popup>
		
	</view>
	
	
	
</template>

<script setup>
	import { ref,reactive,onMounted } from 'vue'
	import { postCall,postJD,postKDN,postYinLianPay,postYinLianPayClose } from '@/api/index.js'
	import { EventBus } from '@/mitt/EventBus.js';
	import { toastMessage } from '@/utils/toast.js'
	import { createParams,generateUUID16 } from '@/utils/utils.js'
	import Big from 'big.js';
	import dayjs from "dayjs";


	const signBoardRef = ref()

	// 图片地址
	const imagePath = ref('')

	//保存签名
	const saveSign = () => {
		signBoardRef.value?.save().then((res) => {
			imagePath.value = res
		})
	}
	const roateSaveSign = () => {
	signBoardRef.value
		?.save(true)
		.then((res) => {
		imagePath.value = res
		})
		.catch((err) => {
		console.error(err)
		uni.showToast({
			title: '保存失败',
			icon: 'none',
		})
		})
	}
	//清空签名，重新签名
	const clearSign = () => {
		signBoardRef.value?.clear()
	}

	const QrCode = ref(" ");
	const payTypeValue = ref("挂账");
	const procName = "PROC_APP_DO_ORDER";
	const colors = "#fa436a";
	let orderInfoData = reactive({});
	const showPopup = ref(false)
	const jdStateData = reactive([]);
	const stepData = reactive([]);
	const userInfo = reactive({});
	const ssTaxAmount = ref(0);
	const payTypeCashAdjReason = ref('');
	const showReceiptDialog = ref(false)
	const showReceiptDialogTwo = ref(false)
	const receiptImages = ref([])
	const showSignatureDialog = ref(false)
	const ctx = ref(null)
	const isDrawing = ref(false)
	const lastX = ref(0)
	const lastY = ref(0)
	const points = ref([])
	onMounted(()=>{
		const tempOrderInfo = uni.getStorageSync("TMSINFO");
		Object.assign(orderInfoData,tempOrderInfo);
		selSumAmount.value = tempOrderInfo.taxamount;
		Object.assign(userInfo,uni.getStorageSync('USERINFO'));
		if(userInfo.paytype){
			payTypeValue.value = userInfo.paytype;
		}
		ssTaxAmount.value = selSumAmount.value;
		getPayTypeCashAdjReason();
	});
	
	const selAll = () =>{	
		for(let i = 0;i<orderInfoData.details.length;i++){
			orderInfoData.details[i].sel = 1;
		}
		compTMS();
	}
	const selSumAmount = ref(0);
	const compTMS = () =>{
		let taxAmount = 0;
		let selAmount = 0;
		for(let i = 0;i<orderInfoData.details.length;i++){
			taxAmount = new Big(taxAmount).plus(new Big(orderInfoData.details[i].taxamount));
			if(orderInfoData.details[i].sel =="1"){
				selAmount = new Big(selAmount).plus(new Big(orderInfoData.details[i].taxamount))
			}
		}
		// taxAmount = taxAmount.toFixed(2);
		orderInfoData.taxamount = taxAmount;
		selSumAmount.value = selAmount;
	} 
	let save = () =>{
		let billcodeList = [];
		for(let j=0;j<orderInfoData.details.length;j++){
			if(orderInfoData.details[j].sel == "1"){
				billcodeList.push(orderInfoData.details[j].billcode.toString());
			}
		}
		
	}
	const billcode = ref("");
	let timer = null;
	let toNavigate = ()=>{
		billcode.value = userInfo.payprefix + ""+ dayjs().format('YYYYMMDDHHmmss')+""+(Math.floor(Math.random() * 900) + 100);
		let billcodeList = [];
		for(let j=0;j<orderInfoData.details.length;j++){
			if(orderInfoData.details[j].sel == "1"){
				billcodeList.push(orderInfoData.details[j].billcode.toString());
			}
		}
		let params = {};
		params["P_BILLCODES"] = billcodeList.join(",");
		params["P_PROC_NAME"] = "PROC_APP_DO_TMS";
		params["P_PAYTYPEVAL"] = payTypeValue.value;
		params["P_BILLCODE"] = billcode.value;
		params["P_SSTAXAMOUNT"] = ssTaxAmount.value;
		params["P_TAXAMOUNT"] = selSumAmount.value;
		params["P_CASHADJREASON"] = payTypeCashAdjReason.value;
		params["P_ACTION"] = "CHECK";
		postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					params["P_ACTION"] = "SAVE";
					postCall(params).then(res=>{
						if(res){
							if(res.code===200){
							    toastMessage("提交成功！");
								if(payTypeValue.value!='线上支付'){
									uni.navigateTo({
									  url: '/pages/delivery/delivery' 
									})
								}
							}
						}
						if(payTypeValue.value==='线上支付'){
							params["P_ACTION"] = "CLOSE";
							postCall(params).then(res=>{
								if(res){
									if(res.code===200){
										let dataset = res.data.DATASET;
										if(dataset.length>0){
											for(let i=0;i<dataset.length;i++){
												let dataInfo = {};
												dataInfo.requestTimestamp = dayjs().format('YYYY-MM-DD HH:mm:ss');
												dataInfo.mid = userInfo.mid;
												dataInfo.tid = userInfo.tid;
												dataInfo.instMid = "QRPAYDEFAULT";
												dataInfo.qrCodeId = dataset[i].billcode;
												let body  = {};
												body.body = dataInfo;
												postYinLianPayClose(body).then(res=>{
													params["P_BILLCODE_CLOSE"] =  dataset[i].billcode;
													params["P_ACTION"] = "BILLCLOSE";
													postCall(params).then(res=>{
														
													})
												})
											}
										}
									}
								}
								let dataInfo = {};
								dataInfo.requestTimestamp = dayjs().format('YYYY-MM-DD HH:mm:ss');
								dataInfo.mid = userInfo.mid;
								dataInfo.tid = userInfo.tid;
								dataInfo.instMid = "QRPAYDEFAULT";
								dataInfo.billNo = billcode.value;
								dataInfo.billDate = dayjs().format('YYYY-MM-DD');
								dataInfo.billDesc = billcodeList.join(",");
								dataInfo.totalAmount = new Big(selSumAmount.value).times(100);
								dataInfo.expireTime = dayjs().add(7, 'day').format('YYYY-MM-DD HH:mm:ss');
								// dataInfo.totalAmount = 1;
								dataInfo.notifyUrl = userInfo.payurl;
								dataInfo.qrCodeId = billcode.value;
								let body  = {};
								body.body = dataInfo;
								postYinLianPay(body).then(res=>{
									if(res.data.errMsg){
										toastMessage(res.data.errMsg);
									}
									if(res.data.billQRCode){
										showPopup.value = true;
										QrCode.value = res.data.billQRCode;
									}
									timer = setTimeout(() => {
										queryPayState();
									}, 1000);
								})
								
							})
							
						}	
					})  
					
				}	
			}	
		})
		
		
		// let params = {};
		// params["P_PROC_NAME"] = "PROC_APP_DO_ORDER";
		// params["P_ACTION"] = "ADDSHOP";
		// params["P_BILLNO"] = orderInfoData.billno;
		// postCall(params).then(res=>{
		// 	if(res){
		// 		if(res.code===200){
		// 		    toastMessage("添加成功！");
		// 			uni.setStorageSync("index",2);
		// 		    uni.navigateTo({
		// 			  url: '/pages/index/index'
		// 		    })
		// 		}
		// 	}
		   
		// })   
	} 
	const beforeBack = () => {
	  return new Promise((resolve) => {
	    if (timer) {
	    	clearTimeout(timer);
	    }
		resolve(true)
	  })
	}
	let clickPopup = ()=>{
		if (timer) {
			clearTimeout(timer);
		}
	}
	let queryPayState = () =>{
		if (timer) {
			clearTimeout(timer);
		}
		let params = {};
		params["P_PROC_NAME"] = "PROC_APP_DO_PAY";
		params["P_BILLCODE"] = billcode.value;
		params["P_ACTION"] = "QUERY";
		params["isShowLoading"] = false;
		postCall(params).then(res=>{
			if(res.code===200){
				if(res.data.DATASET.length>0){
					if (timer) {
						clearTimeout(timer);
						timer = null;
					}
					showPopup.value = false;
					uni.navigateTo({
					  url: '/pages/delivery/delivery'
					})
				}else{
					timer = setTimeout(() => {
						queryPayState();
					}, 1000);
				}
			}else{
				timer = setTimeout(() => {
					queryPayState();
				}, 1000);
			}
		})
	}
	
	let toKdState = (item)=>{
		console.log(item.body);
		showPopup.value = true;
		let params = {};
		params["P_PROC_NAME"] = "PROC_APP_DO_ORDER";
		params["P_ACTION"] = "JD";
		Object.assign(params,JSON.parse(item.body));
		stepData.length = 0;
		// postJD(params).then(res=>{
		// 	if(res){
		// 		if(res.code===200){
		// 			console.log(res.data);
		// 		   if(res.data.code===1000){
		// 			   Object.assign(jdStateData,res.data.data)
		// 			   for(let i = 0 ;i<res.data.data.length;i++){
		// 				   let item = {};
		// 				   item.name = res.data.data[i].operationTitle;
		// 				   item.time = res.data.data[i].operationTime;
		// 				   item.isNow = 0;
		// 				   item.type = 1;
		// 				   item.desc = res.data.data[i].operationRemark;
		// 				   stepData.push(item)
		// 			   }
		// 			   stepData.sort(function(a,b){
		// 				   let dateA = new Date(a.time);
		// 				   let dateB = new Date(b.time);
		// 				   return dateB-dateA;
		// 			   })
		// 			   if(stepData.length>0){
		// 				   stepData[0].isNow = 1;
		// 			   }
		// 			   stepData.forEach(function(operation) {
		// 			     console.log(operation);
		// 			   });
		// 		   }else{
		// 			   toastMessage(res.data.message);
		// 		   }
		// 		}
		// 	}
		// })   
		params["P_ACTION"] = "KDN";
		postKDN(params).then(res=>{
			if(res){
				if(res.code===200){
					console.log(res.data);
				   if(res.data.Success){
					   Object.assign(jdStateData,res.data.Traces)
					   for(let i = 0 ;i<res.data.Traces.length;i++){
						   let item = {};
						   item.name = res.data.Traces[i].AcceptStation;
						   item.time = res.data.Traces[i].AcceptTime;
						   item.isNow = 0;
						   item.type = 1;
						   item.desc = res.data.Traces[i].Location;
						   stepData.push(item)
					   }
					   stepData.sort(function(a,b){
						   let dateA = new Date(a.time);
						   let dateB = new Date(b.time);
						   return dateB-dateA;
					   })
					   if(stepData.length>0){
						   stepData[0].isNow = 1;
					   }
					   stepData.forEach(function(operation) {
					     console.log(operation);
					   });
				   }else{
					   toastMessage(res.data.Reason);
				   }
				   
				}
			}
		})   
	}
	
	let coypText = (info) =>{
		uni.setClipboardData({
			data: info,//要被复制的内容
			success:() => {//复制成功的回调函数
				uni.showToast({//提示
					title:'复制成功' 
				})
			}
		});
	}
	const payTypeCashAdjReasonList= reactive([]);
	let getPayTypeCashAdjReason = ()=>{
		let params = {};
		params["P_PROC_NAME"] = "PROC_APP_DO_TMS";
		params["P_ACTION"] = "CASHADJREASON";
		postCall(params).then(res=>{
			if(res){
				if(res.code===200){
				    Object.assign(payTypeCashAdjReasonList,res.data.DATASET)
				}
			}
		}) 
	}
	
	let sortTime = (a,b) =>{
		return a.time - b.time
	}
	
	let getKdInfo = ()=>{
		let params = {};
		params["P_PROC_NAME"] = "PROC_APP_DO_ORDER";
		params["P_ACTION"] = "JD";
		postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					
				}
			}
		}) 
	}
	
	//打开回执上传弹窗
	const openReceiptDialog = () => {
		showReceiptDialog.value = true
		receiptImages.value = []
	}

	//处理图片上传成功
	const handleUploadSuccess = (e) => {
		console.log('上传成功：', e)
		uni.showToast({
			title: '上传成功',
			icon: 'success'
		})
	}

	//处理图片上传失败
	const handleUploadFail = (e) => {
		console.log('上传失败：', e)
		uni.showToast({
			title: '上传失败',
			icon: 'error'
		})
	}

	//提交回执
	const handleSubmitReceipt = () => {
		if (receiptImages.value.length === 0) {
			uni.showToast({
				title: '请上传回执图片',
				icon: 'none'
			})
			return
		}
		
		console.log('提交回执：', {
			billcode: billcode.value,
			images: receiptImages.value
		})
		
		uni.showLoading({
			title: '提交中...'
		})
		
		// 模拟接口调用
		setTimeout(() => {
			uni.hideLoading()
			uni.showToast({
				title: '提交成功',
				icon: 'success'
			})
			showReceiptDialog.value = false
		}, 1500)
	}
	
	//获取位置信息
	const getLocation = () => {
		uni.showLoading({
			title: '获取位置中...'
		})
		
		uni.getLocation({
			type: 'gcj02',
			success: (res) => {
				const { latitude, longitude } = res
				// 使用逆地理编码获取详细地址
				uni.request({
					url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=YOUR_MAP_KEY`,
					success: (addressRes) => {
						if (addressRes.data.status === 0) {
							orderInfoData.address = addressRes.data.result.address
							uni.showToast({
								title: '地址更新成功',
								icon: 'success'
							})
						} else {
							uni.showToast({
								title: '获取地址失败',
								icon: 'none'
							})
						}
					},
					fail: () => {
						uni.showToast({
							title: '获取地址失败',
							icon: 'none'
						})
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},
			fail: (err) => {
				uni.hideLoading()
				uni.showToast({
					title: '获取位置失败',
					icon: 'none'
				})
				console.error('获取位置失败：', err)
			}
		})
	}
	
	//拨打电话
	const makePhoneCall = () => {
		if (!orderInfoData.phone) {
			uni.showToast({
				title: '暂无联系电话',
				icon: 'none'
			})
			return
		}
		
		uni.makePhoneCall({
			phoneNumber: orderInfoData.phone,
			success: () => {
				console.log('拨打电话成功')
			},
			fail: (err) => {
				console.error('拨打电话失败：', err)
				uni.showToast({
					title: '拨打电话失败',
					icon: 'none'
				})
			}
		})
	}
	
	//打开导航
	const openNavigation = () => {
		if (!orderInfoData.address) {
			uni.showToast({
				title: '暂无地址信息',
				icon: 'none'
			})
			return
		}
		
		uni.showLoading({
			title: '正在解析地址...'
		})
		const longitude = 116.38;
					const latitude = 37.45;
					
					// 根据平台选择不同的导航方式
					uni.getSystemInfo({
						success: (sysInfo) => {
							if (sysInfo.platform === 'android') {
								// Android 平台使用高德地图
								plus.runtime.openURL(`androidamap://navi?sourceApplication=appname&poiname=${encodeURIComponent(orderInfoData.address)}&lat=${latitude}&lon=${longitude}&dev=0&style=2`)
								} else if (sysInfo.platform === 'ios') {
								// iOS 平台优先使用高德地图
								plus.runtime.openURL(`iosamap://navi?sourceApplication=appname&poiname=${encodeURIComponent(orderInfoData.address)}&lat=${latitude}&lon=${longitude}&dev=0&style=2`)
							}
							
							// 如果高德地图未安装，则使用浏览器打开高德地图网页版
							setTimeout(() => {
								plus.runtime.openURL(`https://uri.amap.com/navigation?to=${longitude},${latitude},${encodeURIComponent(orderInfoData.address)}&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=1`)
							}, 2000)
						}
					})
		
	}
	
	//打开签名弹窗
	const openSignatureDialog = () => {
		showSignatureDialog.value = true
		// 初始化画布
		setTimeout(() => {
			ctx.value = uni.createCanvasContext('signatureCanvas')
			// 设置画笔样式
			ctx.value.setStrokeStyle('#000000')
			ctx.value.setLineWidth(3)
			ctx.value.setLineCap('round')
			ctx.value.setLineJoin('round')
			points.value = []
		}, 100)
	}

	//开始绘制
	const touchStart = (e) => {
		isDrawing.value = true
		const touch = e.touches[0]
		lastX.value = touch.x
		lastY.value = touch.y
		points.value = [[touch.x, touch.y]]
		ctx.value.beginPath()
		ctx.value.moveTo(touch.x, touch.y)
	}

	//绘制过程
	const touchMove = (e) => {
		if (!isDrawing.value) return
		const touch = e.touches[0]
		const currentX = touch.x
		const currentY = touch.y
		
		// 添加点到数组
		points.value.push([currentX, currentY])
		
		// 如果点数太少，直接连线
		if (points.value.length < 3) {
			ctx.value.lineTo(currentX, currentY)
		} else {
			// 使用贝塞尔曲线使线条更平滑
			const lastTwoPoints = points.value.slice(-2)
			const controlX = (lastTwoPoints[0][0] + lastTwoPoints[1][0]) / 2
			const controlY = (lastTwoPoints[0][1] + lastTwoPoints[1][1]) / 2
			ctx.value.quadraticCurveTo(lastTwoPoints[0][0], lastTwoPoints[0][1], controlX, controlY)
		}
		
		ctx.value.stroke()
		ctx.value.draw(true)
		
		lastX.value = currentX
		lastY.value = currentY
	}

	//结束绘制
	const touchEnd = () => {
		if (!isDrawing.value) return
		isDrawing.value = false
		
		// 确保最后一段线条也被绘制
		if (points.value.length > 1) {
			const lastPoint = points.value[points.value.length - 1]
			ctx.value.lineTo(lastPoint[0], lastPoint[1])
			ctx.value.stroke()
			ctx.value.draw(true)
		}
	}

	//保存签名
	const saveSignature = () => {
		uni.canvasToTempFilePath({
			canvasId: 'signatureCanvas',
			success: (res) => {
				console.log('签名保存成功：', res.tempFilePath)
				uni.showToast({
					title: '签名保存成功',
					icon: 'success'
				})
				showSignatureDialog.value = false
			},
			fail: (err) => {
				console.error('保存失败：', err)
				uni.showToast({
					title: '保存失败',
					icon: 'error'
				})
			}
		})
	}

	 //清除签名
	const clearSignature = () => {
		if (!ctx.value) return
		ctx.value.clearRect(0, 0, 300, 200)
		ctx.value.draw()
		points.value = []
	}
	
</script>

<style>
.main-class {
  width: 100%;
}

.header-class {
  height: 20vh;
  flex-direction: column;
}

.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}

.scroll-view-class {
  height: calc(100vh - 20vh - 100rpx);
}

.bottom-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  padding: 20rpx;
  background-color: #fff;
}

.popup-class {
  text-align: center;
  overflow-y: auto;
  max-height: 80vh;
}

.popup-class-title {
  width: 80vw;
  text-align: left;
  overflow-y: auto;
}

.receipt-dialog {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.dialog-title {
  font-size: 32rpx;
  font-weight: bold;
}

.dialog-content {
  padding: 20rpx 0;
}

.dialog-footer {
  display: flex;
  justify-content: space-around;
  margin-top: 30rpx;
}

.signature-dialog {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
}

.signature-content {
  width: 100%;
  height: 400rpx;
  border: 2rpx solid #eee;
  margin: 20rpx 0;
}

.signature-canvas {
  width: 100%;
  height: 100%;
}
</style>
